<script>
export default {
  name: "trafficSource",
  props: {
    params: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      form:{
        account: "",
        password: "",
        sourceOfTraffic: "每一次访问来源",
        dataCycle: 30,
      },
      rules: {
        account: [
          { required: true, message:'请输入账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message:'请输入密码', trigger: 'blur' },
        ],
      },
      options: {
        dataCycle: [30, 7],
        sourceOfTraffic: ["每一次访问来源", "第一次访问来源", "最后一次访问来源"]
      }
    };
  },
  watch: {
    "params": {
      handler(val) {
        this.initParams({ ...this.params });
      }
    }
  },
  created() {
    this.initParams({ ...this.params });
  },
  methods: {
    initParams({ account = "", password = "", sourceOfTraffic = "每一次访问来源", dateCycle = 30 }) {
      this.form.account = account;
      this.form.password = password;
      this.form.sourceOfTraffic = sourceOfTraffic;
      this.form.dateCycle = dateCycle;
    },
    checkParam(){
      let r = true
      this.$refs["form"].validate((valid) => {
        r = valid
        return r
      })
      if (!r){
        this.$message.warning("[生意参谋-商品-流量来源] 任务有参数填写错误")
      }
      return r
    },
    getParam(){
      return this.form
    }
  }
};
</script>

<template>
  <div>
    <div style="margin-top: 10px">
      <el-form :model="form" ref="form" :rules="rules" :inline=false label-width="60px" size="mini" label-position="left" label-suffix=" :">
        <el-form-item label="账号" prop="account" style="display: inline-block">
          <el-input v-model="form.account" placeholder="请输入账号" clearable style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" style="display: inline-block;margin-left: 50px">
          <el-input v-model="form.password" placeholder="请输入密码" clearable show-password  style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="转化效果归属于" prop="sourceOfTraffic" label-width="120px">
          <el-radio-group v-model="form.sourceOfTraffic">
            <el-radio v-for="item in options.sourceOfTraffic" :label=item>{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数据周期" prop="dataCycle" label-width="80px">
          <el-radio-group v-model="form.dataCycle">
            <el-radio v-for="item in options.dataCycle" :label=item>{{item}}天</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<style scoped>

</style>